<template>
  <div class="case-detail" v-if="caseInfo">
    <Scroll class="case-scroll" :data="caseInfo">
      <case-detail-cmp :caseInfo="caseInfo" />
    </Scroll>
    <div class="btn" v-if="userInfo && !parseInt(userInfo.identity_type)">
      <my-button name="立即预约" @btnClick="handleBtnClick" />
    </div>
    <Tip title="预约" class="appointment" ref="appointment">
      <div class="input-box">
        <van-form @submit="onSubmit">
          <van-field required label="您的称呼" v-model="form.name" placeholder="请输入您的姓名" />
          <van-field
            required
            label="您的手机"
            :rules="[{ validator, message: '请输入有效手机号码' }]"
            type="tel"
            v-model="form.phone"
            placeholder="请输入您的手机号"
          />
          <van-field
            type="number"
            required
            :rules="[{ pattern, message: '请输入有效验证码' }]"
            v-model="form.captcha"
            label="验证码"
            placeholder="请输入验证码"
          >
            <template slot="extra">
              <span @click="getCodeClick" v-if="showGetCode">{{ codeTxt }}</span>
              <span v-else style="position:relative; left: -0.4rem">{{time}}s</span>
            </template>
          </van-field>
          <van-field
            rows="3"
            v-model="form.message"
            autosize
            label="您的留言"
            type="textarea"
            placeholder="请输入您的留言"
            maxlength="50"
            show-word-limit
          />
        </van-form>
      </div>
      <my-button name="确定" @btnClick="onSubmit" />
    </Tip>
  </div>
</template>
<script>
import Scroll from '@/components/scroll/scroll'
import CaseDetailCmp from '@/components/case-detail-cmp/case-detail-cmp'
import Tip from '@/components/tip/tip'
import { getDesignerCaseDetail, appointmentDesigner } from '@/api/home'
const constantTime = 60
const ERR_OK = 200
export default {
  components: {
    Scroll,
    CaseDetailCmp,
    Tip
  },
  data () {
    return {
      swiperOptions: {},
      caseInfo: null,
      showGetCode: true,
      time: constantTime,
      timer: null,
      codeTxt: '获取验证码',
      phone: 18888430435,
      message: '',
      designerInfo: null,
      form: {
        designerId: '',
        phone: '',
        name: '',
        captcha: '',
        message: ''
      },
      pattern: /^[0-9]*$/
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  watch: {
    time (newVal) {
      if (newVal <= 0) {
        this.timer && clearInterval(this.timer)
        this.showGetCode = true
        this.codeTxt = '重新获取'
        this.time = constantTime
      }
    }
  },
  created () {
    if (this.$route.query.case_id) {
      this._getDesignerCaseDetail(this.$route.query.case_id)
    } else {
      this.$router.back()
    }
  },
  methods: {
    validator (val) {
      return /^[1][3,4,5,7,8,9][0-9]{9}$/.test(val)
    },
    onSubmit () {
      this.form.designerId = this.userInfo.id
      this._appointmentDesigner(this.form).then(res => {
        if (res.code === ERR_OK) {
          this.$refs.appointment.hide()
          this.$toast('预约成功~')
        }
      })
    },
    handleBtnClick () {
      this.$refs.appointment.show()
    },
    getCodeClick () {
      if (this.showGetCode) {
        this.showGetCode = false
        this.timer = setInterval(() => {
          this.time -= 1
        }, 1000)
      }
    },
    _getDesignerCaseDetail (id) {
      getDesignerCaseDetail(id)
        .then(res => {
          if (res.code === ERR_OK) {
            this.caseInfo = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _appointmentDesigner ({ designerId, phone, name, captcha, message }) {
      return appointmentDesigner({ designerId, phone, name, captcha, message })
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.case-detail {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  touch-action: none;
  .case-scroll {
    width: 100%;
    height: 100%;
  }
  .swiper-container {
    width: 100%;
    // height: 5.2rem;
    img {
      width: 100%;
    }
  }
  .desc-box {
    width: 100%;
    padding: 0 0.36rem;
    box-sizing: border-box;
    .txt-top {
      width: 100%;
      padding: 0.7rem 0;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(238, 238, 238, 1);

      .title {
        font-size: 0.4rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(0, 4, 0, 1);
        line-height: 0.4rem;
      }
      .name {
        font-size: 0.28rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(0, 4, 0, 1);
        line-height: 0.28rem;
        margin-top: 0.27rem;
      }
    }
    .desc {
      width: 100%;
      padding: 0.3rem 0;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      display: flex;
      .left {
        width: 1.4rem;
        font-size: 0.26rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(0, 4, 0, 1);
        line-height: 0.32rem;
        font-weight: bold;
      }
      .right {
        flex: 1;
        white-space: pre-wrap;
        font-size: 0.22rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 0.38rem;
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 0.36rem 2rem 0.36rem;
    box-sizing: border-box;
    .title {
      font-size: 0.38rem;
      font-family: PingFang SC;
      font-weight: bold;
      color: rgba(0, 4, 0, 1);
      line-height: 0.38rem;
      padding: 0.8rem 0;
      i {
        display: inline-block;
        width: 0.24rem;
        height: 0.06rem;
        background: rgba(4, 36, 45, 1);
      }
    }
    .intro-msg {
      font-size: 0;
      padding-bottom: 1rem;
      img {
        width: 100%;
        margin-bottom: 0.3rem;
      }
    }
  }
  .btn {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    width: 100%;
    padding: 0.32rem 0.36rem;
    box-sizing: border-box;
    border-top: 1px solid rgba(238, 238, 238, 1);
    font-size: 0;
  }
  .appointment {
    .input-box {
      margin-top: 1rem;
      .van-cell {
        padding-left: 0;
        padding-right: 0;
        padding: 15px 0;
        &::after {
          left: 0;
        }
        &::before {
          left: -10px;
        }
      }
    }
  }
}
</style>
